<template>
  <div>
    <h1>显示头像的路径</h1>
    <myTable :list="list">
      <template v-slot="scope">
        <p>{{scope.row}}</p>
      </template>
    </myTable>
    <h1>显示头像的图片</h1>
    <myTable :list="arr">
      <template v-slot="scope">
      <img :src="scope.row" alt="我是图片">
      </template>
    </myTable>
  </div>
</template>

<script>
import myTable from "./components/myTable.vue"
export default {
  components: { myTable },
  data(){
    return {
  list: [
      {
        id: 1,
          name: "小传同学",
          age: 18,
          headImgUrl:
          "http://yun.itheima.com/Upload/./Images/20210303/603f2d2153241.jpg",
      },
      {
        id: 2,
          name: "小黑同学",
          age: 25,
          headImgUrl:
          "http://yun.itheima.com/Upload/./Images/20210304/6040b101a18ef.jpg",
      },
      {
        id:3,
          name: "智慧同学",
          age: 21,
          headImgUrl:
          "http://yun.itheima.com/Upload/./Images/20210302/603e0142e535f.jpg",
      },
  ],
  arr:[
     {
       id: 1,
       name: "小明",
       age: 12,
       headImgUrl: "http://yun.itheima.com/Upload/./Images/20210303/603f2d2153241.jpg"
     },{
       id: 2,
       name: "小芳",
       age: 18,
       headImgUrl: "http://yun.itheima.com/Upload/./Images/20210303/603f2d2153241.jpg"
     }        
  ]
    }
  }
}
</script>

<style>

</style>